<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style>
        .el-row {
            display: block;
            width: 300px;
            margin: 50px auto;
            height: 50px;
            background-color: #8d526d;
            border-radius: 20px;}

        .el-col {
            display: block;
            width: 300px;
            margin: 50px  0 auto;
            height: 50px;
            background-color: #8d526d;
            border-radius: 20px;

            border-radius: 4px;
            margin: 50px   auto;


        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: block;
            width: 300px;
            margin: 50px   auto;
            height: 50px;
            background-color: #8d526d;
            border-radius: 20px;

        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body style="background-color:#f2f2f2 ;color: #ffffff;line-height: 50px; text-align: center;font-size: 20px;">
<span style="color: black;font-size: 30px;">网上预约挂号流程</span>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple" >预约挂号</div></el-col>
</el-row>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">选择科室</div></el-col>
</el-row>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">选择医生</div></el-col>
</el-row>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">选择就诊时间</div></el-col>
</el-row>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">填写个人信息</div></el-col>
</el-row>
<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">支付</div></el-col>
</el-row>


</body>
</html>